<div class="page-layout carded left-sidebar tabbed">

    <!-- TOP BACKGROUND -->
    <div class="top-bg accent"></div>
    <!-- / TOP BACKGROUND -->

    <!-- SIDEBAR -->
    <fuse-sidebar class="sidebar" name="carded-left-sidebar-tabbed-1" position="left" lockedOpen="gt-md">

        <!-- SIDEBAR HEADER -->
        <div class="header p-24 accent">
            <h2 class="m-0">Sidebar header</h2>
        </div>
        <!-- / SIDEBAR HEADER -->

        <!-- SIDEBAR CONTENT -->
        <div class="content p-24">
            <fuse-demo-sidebar></fuse-demo-sidebar>
        </div>
        <!-- / SIDEBAR CONTENT -->

    </fuse-sidebar>
    <!-- / SIDEBAR -->

    <!-- CENTER -->
    <div class="center">

        <!-- CONTENT HEADER -->
        <div class="header accent p-24">

            <div fxLayout="row" fxLayoutAlign="start start">

                <button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
                        (click)="toggleSidebar('carded-left-sidebar-tabbed-1')">
                    <mat-icon>menu</mat-icon>
                </button>

                <h2 class="m-0">Left sidebar with tabs and content scroll</h2>

            </div>

        </div>
        <!-- / CONTENT HEADER -->

        <!-- CONTENT CARD -->
        <div class="content-card">

            <!-- CONTENT -->
            <div class="content">

                <mat-tab-group>

                    <mat-tab label="Tab 1">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 2">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 3">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 4">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 5">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 6">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 7">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 8">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 9">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                    <mat-tab label="Tab 10">
                        <div class="tab-content p-24">
                            <!-- PUT YOUR TAB CONTENT HERE -->
                            <fuse-demo-content></fuse-demo-content>
                            <!-- / PUT YOUR TAB CONTENT HERE -->
                        </div>
                    </mat-tab>

                </mat-tab-group>

            </div>
            <!-- / CONTENT -->

        </div>
        <!-- / CONTENT CARD -->

    </div>
    <!-- / CENTER -->

</div>
